<script>
import { api } from '@/api';
import { setNavbarTitle } from '@/stores/app';
import useContactsStore from '@/stores/contacts';
import { mapStores } from 'pinia';
import { Button, Cell, Checkbox, CheckboxGroup, Dialog, Field, Toast } from 'vant';

const DialogComponent = Dialog.Component

export default {
  components: {
    Cell,
    Checkbox,
    CheckboxGroup,
    Button,
    DialogComponent,
    Field
  },
  computed: {
    ...mapStores(useContactsStore),
    groupId() {
      return this.$route.query?.groupId?.replace('@TGS$', '@TGS#') ?? ''
    }
  },
  data() {
    return {
      list: [],
      selected: [],
      groupName: '',
      show: false
    }
  },
  async created() {
    setNavbarTitle('选择联系人')
    this.contactsStore.refreshFriends()
  },
  methods: {
    async handleCreate() {
      const loading = Toast.loading({ message: '正在处理...', overlay: true })
      let GroupId = this.groupId
      if (!GroupId) {
        const { ActionStatus, GroupId: id } = await api.group.create({ Name: this.groupName })
        if (ActionStatus !== 'OK') {
          loading.clear()
          Toast.fail({ message: '创建失败' })
          return
        }
        GroupId = id
      }

      const { ActionStatus: ActionStatus2 } = await api.group.import({ GroupId, Member_Accounts: this.selected.map(item => ({ Member_Account: item })) })
      if (ActionStatus2 !== 'OK') {
        loading.clear()
        Toast.fail({ message: '导入群成员失败' })
        return
      }

      loading.clear()
      Toast.success({ message: this.groupId ? '添加成功' : '创建成功' })
      this.$router.back()
    },
    async handleFinish() {
      if (this.groupId) {
        await this.handleCreate()
      } else {
        this.show = true
      }
    }
  },
}
</script>

<template>
  <div class="create-group">
    <div class="contacts-list">
      <CheckboxGroup v-model="selected">
        <div v-for="item in contactsStore.friends" :key="item.username" class="contacts-item">
          <Checkbox style="width: 100%;" :name="item.friend_name">
            <div class="contacts-item-info">
              <img class="contacts-item-avatar" :src="`/${item.avatar_url}`" alt="">
              <div class="contacts-item-name">
                <div class="contacts-item-nickname">{{ item.nickName }}</div>
                <div class="contacts-item-uid">UName: {{ item.friend_name }}</div>
              </div>
            </div>
          </Checkbox>
        </div>
      </CheckboxGroup>
    </div>
    <div class="create-group-buttons">
      <Button class="create-group-cancel" @click="$router.back()">取消</Button>
      <Button class="create-group-submit" type="primary" @click="handleFinish" :disabled="!selected.length">
        <span>完成</span>
        <span v-if="selected.length">({{ selected.length }})</span>
      </Button>
    </div>

    <DialogComponent
      v-model="show"
      title="创建群聊"
      :show-confirm-button="Boolean(groupName.trim().length)"
      show-cancel-button
      @confirm="handleCreate"
    >
      <Field v-model="groupName" label="群名称" placeholder="请输入群名称" />
    </DialogComponent>
  </div>
</template>

<style lang="less" scoped>
.create-group {
  display: flex;
  flex-direction: column;
  height: 100%;

  .contacts-list {
    flex: 1;

    .contacts-item {
      gap: 15px;
      padding: 15px 0;
      margin: 0 15px;

      /deep/ .van-checkbox__label {
        flex: 1;
      }

      .contacts-item-info {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 15px;
        overflow: hidden;
      }

      .contacts-item-send {
        width: 24px;
        height: 24px;
      }

      &-avatar {
        width: 40px;
        height: 40px;
        border-radius: 4px;
        object-fit: cover;
      }

      .contacts-item-name {
        display: flex;
        flex-direction: column;
        gap: 5px;
        font-size: 16px;
        overflow: hidden;

        >div {
          text-overflow: ellipsis;
          overflow: hidden;
          text-wrap: nowrap;
        }

        .contacts-item-uid {
          font-size: 13px;
          color: #999;
        }
      }
    }
  }

  .create-group-buttons {
    display: flex;

    .create-group-cancel {
      border-radius: 0;
      flex: 1;
    }

    .create-group-submit {
      border-radius: 0;
      border-left: 0;
      flex: 1;
    }
  }
}
</style>
